What happens if transition-duration is set to 0s?
Understanding transition-duration: 0s in CSS
When the transition-duration property is set to 0s, the transition occurs instantly — meaning there is no visible animation between the starting and ending states. The property value changes immediately.
transition-duration defines how long a transition should take to complete. Setting it to 0s disables the transition effect but still keeps the transition properties in place for future use.
In this example, when you hover over the box, it instantly expands to 200px width — no smooth transition occurs.
- 1
To temporarily disable transitions for specific states (e.g., on page load).
- 2
To instantly reset an element’s state without visual delay.
- 3
To conditionally control transitions through CSS class changes.
If you set transition-duration: 0s, the browser recognizes a transition rule but executes it instantly. If you omit the transition entirely, there’s no transition rule at all. Functionally, both result in immediate property changes, but keeping 0s can help maintain consistent CSS structure.
You can use a .no-transition class to temporarily disable transitions — useful when programmatically changing styles or resetting animations.
- 1
transition-duration: 0smeans changes happen instantly. - 2
No animation is visible, but the transition rule still exists.
- 3
It’s useful for toggling or disabling transitions temporarily.